<script setup>
import Left from './components/Left.vue'
import Right from './components/Right.vue'
import Tcmpoint from './components/Tcmpoint.vue'
</script>

<template>
  <head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>TCM中医针灸智能问答</title>
  </head>
  <div class="wrapper">
    <div class="left-wrapper"><Left></Left></div>
    <div class="right-wrapper"><Right></Right></div>
    <div class="tcmpoint"><Tcmpoint></Tcmpoint></div>
  </div>
</template>

<style scoped>
.wrapper{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  min-height: 100vh;
  min-width: 100%;
  top:0;
  left:0;
  margin-left: 2.7vw;
}
.wrapper .left-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 21vw;
  min-width: 21vw;
  justify-content: center;
  min-height: 98vh;
  top: 0;
  left: 0;
  position: fixed;
}
.wrapper .right-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 60vw;
  min-width: 60vw;
  min-height: 100vh;
  top: 0;
  left:21vw;
  position: fixed;
}
.wrapper .tcmpoint{
  max-width: 21vw;
  min-width: 21vw;
  height: 100vh;
  display: flex;
  position: fixed;
  right: 0;
}
</style>
